import React from 'react'
import { Space, Table, Tag,Button } from 'antd';
import {useDispatch,useSelector} from "react-redux"
import * as action from "../action/index.js"
import {useEffect,useState} from "react"
import Delmodel from '../components/delmodel.jsx';
import Form1 from '../components/form.jsx';
import Pagenation from '../components/pagenation.jsx';
function Dh1() {
 let [columns,setColumes] = useState([
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    render: (text) => <a>{text}</a>,
  },
  {
    title: 'date',
    dataIndex: 'date',
    key: 'date',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'Action',
    key: 'action',
    render: (_, record,idnex) => (
      <Space size="middle">
        <a onClick={()=>{eidfn(idnex,record)}}>edit</a>
        <a onClick={()=>{delfn(idnex)}}>Delete</a>
      </Space>
    ),
  },
])
let [delmoudelIsshow,setDelmoudelIsshow] = useState(false) // 用于控制删除组件的显示与隐藏
let [editisshow,setEditisshow] =useState(false)
let [isEdit,setIsEid] =useState("新增")
let [eidtIndex,setediIndex] = useState(0)
let [editcont,setEditCount] = useState({})
let [delIndex,setDelINDX] = useState(0)
let [pagenum,setPagenum] = useState(1)
let delisshowfn = (data)=>{ // 这个方法用于子组件关闭父组件弹窗
   setDelmoudelIsshow(data)
}
let editMoelfn = (data)=>{
  setEditisshow(data)
}
let eidfn = (index,record)=> {
      console.log(index,record);
      setEditisshow(true)
      setEditCount(record)
      setediIndex(index)
      setIsEid("编辑")
     
}
let delfn = (index)=>{
  setDelINDX(index)
  setDelmoudelIsshow(true)

}
let addfn = ()=>{
   setEditisshow(true)
   setIsEid("新增")
   setEditCount({})
}
let changefn = (data)=>{
    console.log(data,"dijiye");
    setPagenum(data)
}
  const dispatch = useDispatch()
  const store = useSelector((state)=>{
    return {
        ...state.tablereducer
    }
  })
  console.log(store);
  useEffect(()=>{
      dispatch(action.getlist())
  },[])
  return (
    <div>
         <Button onClick={addfn}>新增</Button>
        <Table columns={columns} dataSource={store.arr.slice((pagenum-1)*5,pagenum*5)} pagination={false}/>
         {/* 删除的弹框组件 */}
         <Delmodel send={delmoudelIsshow} fn={delisshowfn} delIndex={delIndex}></Delmodel>

         <Form1 editisshow={editisshow}  isEdit={isEdit} fn ={editMoelfn} index = {eidtIndex} editcont={editcont}></Form1>
         <Pagenation length1={store.arr} changefn= {changefn}></Pagenation>
    </div>
  )
}

export default Dh1